<template>
  <el-config-provider :locale="zhCn">
    <div class="app-container">
      <el-container>
        <el-header>
          <div class="header-content">
            <h1 class="app-title">
              <el-icon><Partly-Cloudy /></el-icon>
              天气记录应用
            </h1>
            <div class="header-actions">
              <el-switch
                v-model="isDark"
                inline-prompt
                :active-icon="Moon"
                :inactive-icon="Sunny"
                @change="toggleTheme"
              />
            </div>
          </div>
        </el-header>
        
        <el-container>
          <el-aside width="200px">
            <el-menu
              :default-active="activeMenu"
              router
              class="app-menu"
            >
              <el-menu-item index="/">
                <el-icon><House /></el-icon>
                <span>首页</span>
              </el-menu-item>
              <el-menu-item index="/records">
                <el-icon><Document /></el-icon>
                <span>历史记录</span>
              </el-menu-item>
              <el-menu-item index="/analytics">
                <el-icon><DataAnalysis /></el-icon>
                <span>数据分析</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          
          <el-main>
            <router-view v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { Moon, Sunny } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = computed(() => route.path)

// 主题切换
const isDark = ref(localStorage.getItem('theme') === 'dark')

const toggleTheme = (val: boolean) => {
  if (val) {
    document.documentElement.classList.add('dark')
    localStorage.setItem('theme', 'dark')
  } else {
    document.documentElement.classList.remove('dark')
    localStorage.setItem('theme', 'light')
  }
}

// 初始化主题
if (isDark.value) {
  document.documentElement.classList.add('dark')
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
  
  .el-header {
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color);
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      
      .app-title {
        margin: 0;
        font-size: 24px;
        display: flex;
        align-items: center;
        gap: 8px;
        
        .el-icon {
          font-size: 32px;
        }
      }
    }
  }
  
  .el-aside {
    background-color: var(--el-bg-color);
    border-right: 1px solid var(--el-border-color);
    
    .app-menu {
      border: none;
      height: 100%;
    }
  }
  
  .el-main {
    background-color: var(--el-fill-color-blank);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 